import React from 'react';
import _ from 'underscore';
import $ from 'jquery';

import dispatcher from 'lib/dispatcher';
import DropdownList from 'lib/components/DropdownList.jsx';
import Card from 'lib/components/card.jsx';
import { restPostApi } from '../apis/core-util';

const thresholdList = [
  {label:'0.2',value:'0.2'},
  {label:'0.3',value:'0.3'},
  {label:'0.4',value:'0.4'},
  {label:'0.5',value:'0.5'},
  {label:'0.6',value:'0.6'}
];

export default class InteractionSettingView extends React.Component {


  saveHandler() {
    let { appId, appVersionId } = this.props;
    // console.log(this.props);

    this.dataPostApi
        .append({
          changes: `${appId}:${appVersionId}:threshold.activity:${this.state.threshold}`
        })
        .fetch()
        .progress(() => this.setState({ isProcessing: true }))
        .fail(() => this.cancelHandler())
        .done(data => {
          this.setState({
            isProcessing: false,
            isEditing: false
          })
        })
  } // saveHandler

  changeHandler({ value }) {
    let { appId, appVersionId, propertyChanging } = this.props
      , changeKey = `${ appId }:${ appVersionId }:threshold.activity`
      , changes = {
        [changeKey]: `${ changeKey }:${ value }`
      };

    if (propertyChanging) {
      propertyChanging(['app', 'settings', 'threshold.activity'], value, changes);
    }
  } // changeHandler

  render() {
    let threshold = this.props['threshold.activity'].toString();

    return (
      <div className="pure-u-1">
        <div className="fetcher-container">
          <h5 className="card-title sub">
            交互设置
            <sub style={{ fontSize: 12, marginLeft: 5 }}>
              { `(${ BlueWare.isAndroid ? 'Android' : 'iOS' } Agent 版本更新至 2.0.2 以上可用)` }
            </sub>
          </h5>
          <div className="content-container">
            <div className="pure-g">
              <div className="pure-u-1">
                <ul className="form-group" style={{padding:0}}>
                  <li>
                    <label className="control-label">交互详情记录采集阈值</label>
                    <DropdownList
                      style={{minWidth:'80px'}}
                      dropdownStyle={{minWidth:'80px'}}
                      current={_.find(thresholdList, item => item.value === threshold)}
                      list={thresholdList}
                      onChanging={this.changeHandler.bind(this)}
                      disabled={!this.props.isEditing}
                      />
                    {
                      this.props.isEditing?(
                        <p className="note" style={{clear:'both', marginLeft: '155px'}}>
                          以 Trace 采集阈值定义慢交互，阈值增大，则减少采集量；阈值减小，则会增大采集密度
                        </p>
                      ):null
                    }
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  } // render
}
